<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color: red;
        --fontSize: 50px;
        --top: 20px;
      }
      .b {
        --color: blue;
      }
      .c {
        /* 最终的color为blue; */
        color: var(--color);
        height: 200px;
        width: 200px;
        /* 第二个参数为默认值，变量不存在时生效 */
        background-color: var(--backgroundColor, pink);
        /* 变量大小写敏感，--fontsize无法命中--fontSize变量，结果为20px */
        font-size: var(--fontsize, 20px);
      }
      .d {
        /* 变量可以重复使用 */
        color: var(--color);
        /* 可以结合calc()使用 */
        font-size: calc(var(--fontSize) * 2);
        /* 可以用于多属性值中 */
        margin: var(--top) 30px 40px 50px;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="b">
        <div class="c">c</div>
        <div class="d">d</div>
      </div>
    </div>
  </body>
</html>
